<template>
	<div class="zh-table upload-statistics">
		<div class="zh-table-open clear">
			<div class="zh-open-left fl">
				<div class="open-width" style="width: 100px">
					<el-select v-model="role_id" filterable placeholder="请选择">
					    <el-option
					      v-for="item in roleData"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					</el-select>
				</div>
				<div class="open-width" style="width: 270px">
					<el-input v-model="keyword" placeholder="请输入用户名、资源类型、资源名称搜索" @keyup.enter.native="searchFunc"></el-input>
				</div>
				<el-button type="primary" @click="searchFunc">搜索</el-button>
				<el-button type="primary" @click="reset">重置</el-button>
			</div>
			<div class="zh-open-right fr">
				<el-button type="primary" @click="exportList">导出Excel表</el-button>
			</div>
		</div>
		<div class="zh-table-contents">
			<el-table
			    :data="listData"
			    border
			    max-height="600"
			    style="width: 100%">
			    <el-table-column
			      type="index"
                  :index="typeIndex"
			      label="序号"
			      align="center"
			      show-overflow-tooltip
			      width="50"
			      >
			    </el-table-column>
			    <el-table-column
			      prop="username"
			      label="上传人"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="rolename"
			      label="用户角色"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="3"
			      label="资源名称"
			      align="center"
			      show-overflow-tooltip
			      >
			       <template slot-scope="scope">
			      		<span  @click="viewResource(scope.row)"  class="viewResource"> {{scope.row.name}}</span>
			     	</template>
			    </el-table-column>
			    <el-table-column
			      prop="string"
			      label="资源分类"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="file_type_txt"
			      label="资源类型"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="status"
			      label="资源状态"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="create_time"
			      label="上传时间"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			</el-table>
			<div class="table-pagination" v-if="total_number > 10">
				<el-pagination
				    @size-change="handleSizeChange"
				    @current-change="handleCurrentChange"
				    :current-page="listParam.page_index"
				    :page-sizes="[10, 20, 30, 40, 50, 100]"
				    :page-size="listParam.page_size"
				    layout="total, sizes, prev, pager, next, jumper"
				    :total="total_number">
				</el-pagination>
				<div class="pagination-button">
					<el-button 
						@click="getList"
						type="primary" icon="el-icon-refresh" 
						circle title="刷新数据" size="mini" >
					</el-button>
				</div>
			</div>
		</div>
		<transition name="el-fade-in-linear" >
			<div class="masking" :class="{ activeLive: isActive }">
				<div class="maskingBox">
					<div class="masking_h">
						<span>视频预览</span>
						<i class="el-icon-close" @click="viewClose"></i>
					</div>
					<div class="masking_c">
                        <nativeVideo  v-if="showVideoPlayer" :playParam.sync="playParam"></nativeVideo>
					</div>
				</div>
			</div>
		</transition>	
	</div>
</template>
<script>
    import nativeVideo from '../../public/nativeVideo'

  	export default {
	    data() {
		    return {
                showVideoPlayer:false,
                playParam: {play_url: '',},
		      	roleData:[{id:0,name:'全部'}],
		    	listData:[],
		    	listParam:{
		    		keyword:'',
		    		role_id:0,
		    		page_index:1,
		    		page_size:10,
				},
				keyword:'',
		    	role_id:0,
                   total_number:0,
                   videoOptions: {
			      loop: false,
			      height: '360',
		          sources: [{
		            type: "rtmp/mp4",
		            src: "blabla"
		          }],
		          techOrder: ['flash'],
		          autoplay: true,
		          controls: true,
		          poster: "",
				 controlBar: {
			          timeDivider: true,
			          durationDisplay: true,
			          remainingTimeDisplay: false,
			          fullscreenToggle: true  //全屏按钮
			        }
			      },
			    isActive: true
		    }
		},
		created(){
	    	this.getRoleData();
	    	this.getList();
	    },
	    components: {
			nativeVideo,
		},
		methods: {
			searchFunc(){
				this.listParam.role_id = this.role_id;
				this.listParam.keyword = this.keyword;
				this.listParam.page_index = 1;
				this.getList();
			},
			reset() {
				this.role_id = 0;
				this.keyword = '';
				this.listParam = {
					keyword:'',
		    		role_id:0,
		    		page_index:1,
		    		page_size:10,
				}
				this.getList();
			},
			//资源预览转发
			viewResource( obj ){
				//视频预览
				if( parseInt(obj.file_type) === 6 && parseInt(obj.is_video) === 1 ){
					this.videoView(obj.rtmp_url);
				}
				//图片预览
				else if( parseInt(obj.file_type) === 3 ) {
					this.$message.warning("不支持预览的资源类型")
				}
				//文档预览
				else if( parseInt(obj.file_type) === 1){
					this.$message.warning("不支持预览的资源类型")
				}
				//音频预览
				else if( parseInt(obj.file_type) === 5 ){
					this.$message.warning("不支持预览的资源类型")
				}else{
					this.$message.warning("不支持预览的资源类型")
				}

			},
			//关闭视频预览
			viewClose(){
				this.showVideoPlayer = false;
				this.isActive = true
			},
			//视频预览
			videoView(url){
				this.isActive = false
				this.playParam.play_url = url;
				this.showVideoPlayer = true;
			},
			getList(){
				if(this.$store.state.checkLevel){
					this.listParam.app_code = sessionStorage.getItem('CheckSchoolAppCode')
				}
				let success = (data=>{
					this.listData = data.data.data;
					this.total_number = data.data.data_sum;
				})
				//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
				this.$ajax.get('api/user/manage_upload_list',{params: this.listParam,func:{success:success}})
			},
			// 序号
            typeIndex(index) {
                return index + (this.listParam.page_index - 1) * this.listParam.page_size + 1;
            },
			getRoleData(){
		    	// 重写成功回调
				let success = ( data => {
					this.roleData = data.data;
					this.roleData.unshift({id:0,name:'全部身份'})
				});
  				this.$ajax.get('api/role/get_all',{params:{},func:{success:success}})
		    	
		    },
		    handleSizeChange(val) {
		    	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
		    exportList(){
                if( this.listData.length === 0 ){
					this.$message.warning("暂无数据！")
					return false;
                }

                this.export_excel('api/user/manage_upload_list_excel', this.listParam, '上传统计');
	    	},
		},
  	}
</script>
<style lang="scss">
	.masking{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: .5s;
		background: rgba(0,0,0,.3);
		z-index: 4;
		.maskingBox{
			position: absolute;
			top: 20%;
			left: 50%;
			width: 800px;
			margin-left: -400px;
			background: #fff;
		}
		.masking_h{
			padding: 10px 15px;
			background: #348EFC;
			text-align: center;
			text-align-last: justify;
			>span,
			>i{
				font-size: 16px;
				text-align-last: initial;
				display: inline-block;
				vertical-align: middle;
				color: #fff;
			}
			>i{
				cursor: pointer;
			}
		}
		.masking_c{
			padding: 30px;
		}

	}

	.activeLive{
		opacity: 0;
		visibility: hidden;
	}
</style>